<template>
  <div>
    <x-header v-if="iswxXcx != 'wxBank'" :left-options="{ backText: '', preventGoBack: true }" :title="$route.name"
      @on-click-back="headerBackFun">
      <router-link to="/" slot="right">
      </router-link>
    </x-header>
    <div class="scroll-view">
      <div class="loan-banner">
        <!-- <img :src="require('@/assets/loan-banner.jpeg')" alt="" /> -->
      </div>
      <div class="loan-list" v-for="(it1, i1) in loanList">
        <div class="title">{{ it1.title }}</div>
        <div class="loan-li" v-for="(item, index) in it1.list" :key="index" @click="toLoanClick(it1, i1, item, index)">
          <div class="loan-top">
            <div class="top-img" :style="{ background: item.background }">
              <van-icon :name="item.icon" size="26" />
            </div>
            <div class="top-box">
              <h2>{{ item.title }}</h2>
              <div class="top-news-text">
                <p>
                  <span>{{ item.content }}</span>
                </p>
              </div>
            </div>
            <div class="top-arrow">
              <x-icon type="ios-arrow-up" size="30"></x-icon>
            </div>
          </div>
          <div class="bottom-box" v-if="item.number">
            <span>最高可贷{{ item.number }}元</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import {
    Icon
  } from "vant";
  export default {
    name: "mustLoan",
    components: {
      [Icon.name]: Icon,
    },
    data() {
      return {
        loanList: [{
          id: "1",
          title: "经营贷",
          list: [{
              id: "438540818158190593",
              title: "兴农贷",
              code: "XD5190100002",
              content: "新农村建设 助农贷款",
              icon: "after-sale",
              number: "300000",
              background: "#4CD2D5",
            },
            {
              id: "438544865925005313",
              title: "经营快贷",
              code: "XD5110100002",
              content: "你结算 我贷款",
              icon: "after-sale",
              number: "500000",
              background: "#4CD2D5",
            },
          ],
        }, ],
        iswxXcx: "", //是否是微信小程序   如果是不像是标题栏
      };
    },
    created() {
      this.iswxXcx = process.env.Equipment;
      this.getint();
    },
    methods: {
      getint() {
        // 获取token是http://localhost:8080/biz/loginBy/jwtForMobile（行内）参数是account默认wxApplets、audience默认Applets
        //微信银行 account/audience: wxBank, 手机银行 account/audience: mobileBank
        if (process.env.Equipment == "wxBank") {
          let defer = this.baseService.postForm(
            this.__ctx + "/biz/loginBy/jwtForMobile", {
              account: process.env.account, //默认
              audience: process.env.account, //默认
            }
          );
          defer.then((data) => {
            if (data.isOk) {} else {
              this.$vux.toast.show({
                type: "warn",
                text: data.msg,
              });
            }
          });
        }
      },
      toLoanClick(it1, i1, item, index) {
        if ((i1 == 0 && index == 0) || (i1 == 0 && index == 1)) {
          //var proinfo = {
          //  title: item.title,
          //  id: item.id
          //}
          //localStorage.setItem("rds-proinfo", JSON.stringify(proinfo));
          //this.$router.push("/bpm/loanEntryInfo");
          let appId = this.$route.query.appId || ''
          this.$router.push({
            path: "/bpm/agriculturalLoan",
            query: {
              name: item.title,
              appId: appId
            },
          });
        }
      },

      headerBackFun() {
        // let version = this.$bridge.getDeviceType()
        try {
          let params = {
            method: "quit",
          };
          this.$bridge.nativeFunc(params);
        } catch (e) {
          this.$router.back();
        }
      },
    },
  };
</script>

<style scoped lang="less">
  body {
    background-color: #fff !important;
  }

  .vux-header {
    background-color: #f4f4f4;

    /deep/.vux-header-left .left-arrow::before {
      border: 2px solid #1d2129 !important;
      border-width: 2px 0 0 2px !important;
    }

    /deep/.vux-header-title {
      color: #1d2129 !important;
    }

    .vux-header-right a {
      color: #1d2129;
    }
  }

  .scroll-view {
    top: 46px;
    background: #fff;

    .loan-banner {
      border-bottom: 1em solid #ebebeb;

      img {
        width: 100%;
        display: block;
      }
    }

    .loan-list {
      padding: 13px 12px 1px 12px;

      .title {
        padding: 0 5px;
        font-size: 1.7em;
        font-weight: bold;
        line-height: 3em;
      }

      .loan-li {
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 12px;
        padding: 1em 1.3em 0.5em;
        box-shadow: 0px 0px 7px #dedede;

        .loan-top {
          width: 100%;
          display: flex;
          align-items: center;

          .top-img {
            border-radius: 50%;
            min-width: 4em;
            width: 4em;
            height: 4em;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
          }

          .top-box {
            width: 100%;
            padding-left: 1em;

            h2 {
              font-size: 1.7em;
              line-height: 1.7em;
              font-weight: 500;
              overflow: hidden;
              text-overflow: ellipsis;
              // white-space: nowrap;
              margin-bottom: 5px;
              color: #1d2129;
              font-weight: 500;

              .vux-badge {
                margin-left: 0.5em;
              }
            }

            .top-news-text {
              font-size: 1.2em;

              p {
                margin-bottom: 5px;

                span {
                  color: #86909c;
                }
              }
            }
          }

          .top-arrow {
            transform: rotate(90deg);
            min-width: 2em;
            height: 2em;
          }
        }

        .bottom-box {
          font-size: 1.4em;
          color: #8f9295;
          border-top: 1px dashed #c9cdd4;
          padding: 10px 0 5px 5px;
          font-weight: bold;

          .bottom-spot {
            margin: 0 5px;
          }
        }
      }
    }
  }
</style>
